<template>
    <div>
        <div style="margin-bottom: 20px;">
            <el-select v-model="query.vid" placeholder="请选择视频" >
                <el-option :label="v.name" :value="v.id" v-for="v in vlist" :key="v.id"></el-option>
            </el-select>
            <el-button type="primary" @click="select">查询</el-button>
        </div>
        <div v-if="store.state.user.type == 2">
            <el-button type="primary" @click="add(null)">新增题目</el-button>
            <el-button type="danger" @click="handDelete" :disabled="!ids.length">批量删除</el-button>

        </div>
        <el-table border :data="list" style="width: 100%;margin-top: 20px;"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
          </el-table-column>
            <el-table-column prop="title" label="题目名称" />
            <el-table-column prop="daan" label="题目答案" />
            <el-table-column prop="jifen" label="题目学分" />
            <el-table-column prop="jifen" label="题目类型" >
                <template #default="{row}">
                   {{ row.type==1?'单选题':row.type==2?'多选题':'判断题' }}
                </template>
            </el-table-column>
          
<el-table-column label="操作" v-if="store.state.user.type == 2">
    <template #default="scope">
                    <!-- {{scope.row}} -->
                    <el-button type="text" @click="add(scope.row)">修改</el-button>
                    <el-button type="text" @click="handDelete(scope.row)">删除</el-button>
                    <el-button type="text" @click="daan(scope.row)">答案管理</el-button>
                </template>
</el-table-column>
<!-- <el-table-column prop="address" label="Address" /> -->
</el-table>
<el-pagination v-show="total>0" style="margin-top: 20px;" :currentPage="query.page" :page-sizes="[100, 200, 300, 400]" background layout="total,  prev, pager, next, jumper" :page-size="query.size" :total="total" @current-change="currentChange"></el-pagination>
<el-dialog destroy-on-close v-model="dialogVisible" :title="type=='add'?'新增题目':'修改题目'" width="30%" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" :inline="false" size="default">
        <el-form-item prop="title" style="width: 100%;">
            <el-input v-model="form.title" placeholder="请输入题目名称" style="width: 100%;">
            </el-input>
          
           
           
        </el-form-item>
        <el-form-item prop="jifen" style="width: 100%;">
            <el-input v-model="form.jifen" placeholder="请输入题目学分" style="width: 100%;" type="number">
            </el-input>
        </el-form-item>
        <el-form-item prop="daan" style="width: 100%;">
            <el-input v-model="form.daan" placeholder="请输入题目答案" style="width: 100%;">
            </el-input>
        </el-form-item>
        <el-form-item prop="type" style="width: 100%;">
            <el-select v-model="form.type" style="width: 100%;" placeholder="请选择类型" >
                <el-option label="单选题" value="1"></el-option>
                <el-option label="多选题" value="2"></el-option>
                <el-option label="判断题" value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="vid" style="width: 100%;">
            <el-select v-model="form.vid" placeholder="请选择视频"  style="width: 100%;">
                <el-option :label="v.name" :value="v.id" v-for="v in vlist" :key="v.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submit">
      确定
    </el-button>
  </span>
</template>
</el-dialog>

<el-dialog destroy-on-close v-model="dialogVisible2" title="答案管理" width="600px" :before-close="handleClose">
    <el-button type="primary" @click="addDaan">添加</el-button>
    <el-table
    :data="daanList"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="选项"
      width="">
      <template #default="scope">
        {{ getXx(scope) }}  
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="答案"
      width="">
      <template #default="scope">
        <el-input v-model="scope.row.title"/>
      </template>
    </el-table-column>
    <el-table-column
    prop="name"
    label="操作"
    width="">
    <template #default="scope">
        <el-button type="text" @click="shanchu(scope.$index)">删除</el-button>
                </template>
  </el-table-column>
  </el-table>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取消</el-button>
    <el-button type="primary" @click="submit2">
      确定
    </el-button>
  </span>
</template>
</el-dialog>

</div>
</template>
<script setup>
 import {
        useRoute
    } from 'vue-router'
    import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    import {
        shipinfenleiList,
        deptAdd,
        deptDelete,
        shipinfenleideletee,addtimu,getTimuList,edittimu,timuDelete,daanAdd,daanlist,
        shipinfenleiUpdate,
        regshipinfenlei,getvideoList

    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    import {
        Plus
    } from '@element-plus/icons-vue'
    const store = useStore()
    const tid=ref(null)
    const route=useRoute()
    const ids = ref([])
    const daanList = ref([])
    const vlist = ref([])
    const list = ref([])
    const total = ref(0)
    const type = ref('')
    const id = ref('')
    const dialogVisible = ref(false)
    const dialogVisible2 = ref(false)
    const query = ref({
        page: 1,
        size: 10,
        title: '',
    })
    function submit2(){
        daanAdd(daanList.value).then(res=>{
            ElMessage({
                            type: 'success',
                            message: '保存成功',
                        })
                        dialogVisible2.value=false
                        select()
        })
        console.log(daanList.value);
    }
    const form = reactive({
        name: "",
        avatar: ''
    })
    function shanchu(i){
        daanList.value.splice(i,1)
    }
    function addDaan(){
        if( daanList.value.length>=6){
            return   ElMessage({
                            type: 'warning',
                            message: '选项数量已达上限',
                        })
        }
        let sorts=daanList.value.map(v=>v.sort)
        let sort=sorts.length?Math.max(...sorts):0
        daanList.value.push({title:'选项',sort:sort+1,tid:tid.value})
    }
function daan(row){
    dialogVisible2.value=true
    tid.value=row.id
    daanlist({tid:row.id}).then(res=>{
        daanList.value=res.data
        console.log(res);
    })
    
}
    function handleAvatarSuccess(e) {
        form.img = e.data
        console.log(e);
    }
function getXx(scope){
    return scope.$index==0?'A':scope.$index==1?'B':scope.$index==2?'C':scope.$index==3?'D':scope.$index==4?'E':'F'
    console.log(scope.$index);
}
    function currentChange(e) {
        query.value.page = e
        select()
        console.log(e);
    }

    function handleSelectionChange(e) {

        ids.value = e.map(v => v.id)
        console.log(ids.value);
    }
    const rules = {
        type: [{
            required: true,
            message: '不能为空',
            trigger: 'change',
        }],
        vid: [{
            required: true,
            message: '不能为空',
            trigger: 'change',
        }],
        title: [{
            required: true,
            message: '不能为空',
            trigger: 'change',
        }],
        daan: [{
            required: true,
            message: '不能为空',
            trigger: 'change',
        }],
        jifen: [{
            required: true,
            message: '不能为空',
            trigger: 'change',
        }]
    }
    onMounted(() => {
        if(route.query.vid){
            query.value.vid=route.query.vid*1
        }
        getvideoList({page:1,size:99,lid:store.state.user.id}).then(res => {
            vlist.value = res.data.list
            console.log( vlist.value,' vlist.value');
            query.value.vid=vlist.value [0].id
            select()
        })
    })

    function handDelete(row) {
        let id = row.id ? row.id : ids.value.join(',')
        console.log(id);
        ElMessageBox.confirm(
                `是否删除id为${id}的数据?`,
                'Warning', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消删除',
                    type: 'warning',
                }
            )
            .then(() => {
                timuDelete(id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: 'Delete completed',
                        })
                        select()
                    }
                })

            })

    }

    function add(e) {
        form.title = ''
        form.daan = ''
        form.jifen = ''
        form.type = ''
        form.vid = ''
        type.value = "add"
        dialogVisible.value = true
        if (e && e.id) {
            type.value = "edit"
            form.title = e.title
        form.daan =  e.daan
        form.jifen =  e.jifen
        form.type =  e.type
        form.vid =  e.vid
        form.id =  e.id
        }
    }

    function select() {
        getTimuList(query.value).then(res => {
            total.value = res.data.total
            list.value = res.data.list
            
            console.log(res);
        })
    }
    const formRef = ref(null)
    const rowId = ref('')

    function submit() {
        formRef.value.validate((valid) => {
            if (valid) {
                if (type.value == "add") {
                    addtimu(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '新增成功',
                            })
                            dialogVisible.value = false
                            select()
                        }

                    })
                } else {
                    edittimu(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            })
                            dialogVisible.value = false
                            select()
                        }
                    })
                }


            }
        })
    }
</script>
<style scoped>
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>